<template>
  <div>
    <el-button type="text" @click="toBack">返回</el-button>
    <div class="title">产品的类别详情:</div>
      <div>
    <el-row class="info" justify="start">
      <el-col :span="3">编号</el-col>
      <el-col :span="4" class="info-content">{{queryProductCascadeCategoryDataList[0].category.id}}</el-col>
    </el-row>
        <el-row class="info">
      <el-col :span="3">名称</el-col>
      <el-col :span="4" class="info-content">{{queryProductCascadeCategoryDataList[0].category.name}}</el-col>
    </el-row>
    <el-row class="info">
      <el-col :span="3">总数</el-col>
      <el-col :span="4" class="info-content">{{queryProductCascadeCategoryDataList[0].category.num}}</el-col>
    </el-row>
        <el-row class="info">
      <el-col :span="3">图片</el-col>
      <el-col :span="30" class="info-content">{{queryProductCascadeCategoryDataList[0].category.icon}}</el-col>
    </el-row>
        <el-row class="info">
      <el-col :span="3">类别编号</el-col>
      <el-col :span="4" class="info-content">{{queryProductCascadeCategoryDataList[0].category.parentId}}</el-col>
    </el-row>
    </div>
  </div>
</template>

<script>
import {mapActions,mapGetters} from 'vuex';
export default {
  data() {
    return {
      queryParms:{
        page: "0", 
        pageSize: "99",
        status: "",
        name:this.$route.params.id,
      }
    };
  },
  computed: {
    ...mapGetters('product',['queryProductCascadeCategoryDataList']),
  },
  methods: {
    ...mapActions('product',["queryProductCascadeCategory"]),
    toBack(){
      this.$router.go(-1);
    }
    
  },
  created() {
    console.log(this.$route.params.id);
    this.queryProductCascadeCategory(this.queryParms);

  },
  mounted() {}
};
</script>
<style>
.title{
 font-size: 20px;
  margin: 20px;
  margin-left: 20px;
}
  .info{
    /* font-size: 18px; */
    margin-top: 10px;
    margin-left: 20px;
    color: rgb(0, 0, 0);
    margin-bottom: 20px;
  }
  .info-content{
    font-size: 16px;
    text-align: left;
    color: gray;
  }
</style>